{
    const oInput = document.querySelector('.input-search');
    const oDrop = document.querySelector('.drop');
    // 当搜索框获得光标的时候，下拉面板出现
    oInput.onfocus = function(){
        oDrop.style.display = 'block';
    }
    // 点击下拉面板的时候，面板隐藏
    oDrop.onclick = function(){
        oDrop.style.display = 'none';
    }
}

{

    // 侧边栏效果
    const oClose = document.querySelector('.aside-close');
    const oToTop = document.querySelector('.toTop');
    
    const oGiftList = document.querySelector('.gift-list');
    oClose.onclick = function(){
        // 把列表的高度设置为0
        oGiftList.style.height = 0;
        oGiftList.style.visibility = 'hidden';
        oGiftList.style.opacity = 0;
        oGiftList.style.transition = '0.3s ease-out';
        oClose.style.display = 'none';
    }

    // 滚动条判断
    window.onscroll = function(){
        // 获取滚动条滚动的距离
        let scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrolltop);
        // 距离超过700px，则出现返回顶部的按钮，否则消失。
        if(scrolltop > 700){
            oToTop.style.display = 'block';
        }else{
            oToTop.style.display = 'none';
        }
    }
    // 点击返回到顶部按钮，把滚动条滚动的距离设置为0。
    oToTop.onclick = function(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;

    }



}


{
    // 点击menu显示菜单
    const oMenu = document.querySelector('.nav-menu');
    const oMainNav = document.querySelector('.mainnav');
    let isOn = true;
    oMenu.onclick = function(){
        // 开关切换
        if(isOn){
            oMainNav.style.display = 'block';
        }else{
            oMainNav.style.display = 'none';
        }
        // 没点击一次就把状态取反。
        // true => false  false => true
       isOn = !isOn;
    }

}